<template>
	<view>
		<view class="commodity_list">
			<view class="commodity_title">
				瓶身印刷内容
			</view>
			<view class="commodity_textarea">
				<u--textarea v-model="formData.biaoyu" placeholder="输入你想要瓶身印刷的内容" border="none"></u--textarea>
			</view>
		</view>
		<view class="commodity_list">
			<view class="commodity_title">
				上传设计图样
			</view>
			<view class="commodity_Img">
<!-- 				<u-upload :fileList="fileList1" name="1" multiple :maxCount="10">
					<view class="commodity_Img">
						<image src="@/static/images/组 257.png" mode=""></image>
					</view>
				</u-upload>
                -->
                <u-upload
                	:fileList="fileList.files"
                	:maxSize="maxImgSize"
                	name="files"
                	@afterRead="mixinAfterRead" 
                	@delete="mixinDeletePic"
                	:maxCount="1"

                >
                    <view class="commodity_Img">
                        <image src="@/static/images/组 257.png" mode=""></image>
                    </view>
                </u-upload>
                
                
			</view>
		</view>
		<view class="commodity_list">
			<view class="commodity_title">
				联系方式
			</view>
			<view class="commodity_tal">
				<u--input placeholder="请输入" border="none" v-model="formData.tel"
                    placeholderClass="Inputs"></u--input>
			</view>
		</view>
		<view class="commodity_Number">
			<view class="">
				<text>分装数量（瓶）</text>
				<!-- <text>限制{{ pubData.numberMax }}瓶</text> -->
				<text>{{ pubData.numberMax }}瓶</text>
			</view>
<!-- 			<u-number-box v-model="formData.sum" min="0" :max="pubData.numberMax">
				<view slot="minus" class="minus">
					<u-icon name="minus" size="12" color="#707070"></u-icon>
				</view>
				<input slot="input" class="input number-input" 
                    v-model="formData.sum" type="number" @blur="validateNum"></input>
				<view slot="plus" class="plus">
					<u-icon name="plus" size="12" color="#707070"></u-icon>
				</view>
			</u-number-box> -->
			<!-- <Box></Box> -->  
		</view>
<!-- 		<view class="commodity_Number">
			<view class="">
				<text>DIY制作费用</text>
				<text>限制50瓶</text>
			</view>
			<view class="Number_right">
				<text>￥</text>
				<text>999</text>
			</view>
		</view>
		<view class="commodity_Number">
			<view class="">
				<text>邮费</text>
				<text>限制50瓶</text>
			</view>
			<view class="Number_right">
				<text>￥</text>
				<text>999</text>
			</view>
		</view> -->
        
        
        <view class="Product_but bac_ffffff display_center">
        	<u-icon name="server-fill" size="30" color="#B29062" @click="$u.vuex.dispatch('user/makePhoneCallServer')"></u-icon>
        	<view class="but but_B29062 display_center" @click="submit()">提交</view>
        </view>
	</view>
</template>

<script>
	import Box from "@/components/NumberBox/NumberBox.vue"
    import uploadMixin from '@/libs/mixin/u.upload.mixin.js'
    export default {
    mixins: [uploadMixin],
		name: "Packaging_Components",
        props: {
            pubData:{
                type: [Object],
                default: _ => ({})
            }
        },
		data() {
			return {
                maxImgSize: 1024 * 1024 * 8, // mb 限制文件大小
				value: 0,
				states: false,
				value1: '',
				value2: '',
				fileList: {
                    files: []
				},
				formData: {
                    files: '',
                    pa_type: '',
                    hi_id: '',
                    sum: 0,
                    address_id: '',
                    biaoyu: '',
                    tel: '',
				},
			};
		},
		components:{
			Box
		},
        computed: {
            packagingData(){
                return this.pubData.packagingData
            }
        },
        watch: {
            packagingData(news, old){
                this.formData.sum = this.pubData.numberMax
                // 第一次选择瓶样时设置输入框数量为1
                // if(!old){
                //     // this.formData.sum = Math.min(1, this.pubData.numberMax)
                    
                // }
            }
        },
        methods: {
            submit() {
                if(this.pubData.packagingData){
                    this.formData.pa_type = this.pubData.packagingData.id
                }else {
                    return this.$u.toast('请选择瓶样')
                }
                
                if(this.pubData.address_id){
                    this.formData.address_id = this.pubData.address_id
                }else {
                    return this.$u.toast('请选择地址')
                }
                
                if(!uni.$u.test.mobile(this.formData.tel)){
                    return this.$u.toast('请正确输入手机号')
                }
                
                if(this.formData.sum < 1){
                    return this.$u.toast('请输入数量')
                }
                
                this.formData.hi_id = this.pubData.id
                if(this.loading){
                    return 
                }
                uni.showLoading()
                this.loading = true
                this.$u.request('cangjiu.user_packaging_diy_add', {
                    ...this.formData
                })
                .then(res => {
                    
                    uni.hideLoading()
                    uni.navigateBack({
                        success() {
                            setTimeout(() => {
                                uni.showToast({
                                    icon: "success",
                                    title: '提交成功'
                                })
                            }, 200)
                        }
                    })
                }).catch(e => {
                    e.message && this.$u.toast(e.message)
                    uni.hideLoading()
                    this.loading = false
                })
                
                
            },
            validateNum(value){
                this.$nextTick(() => {
                    this.formData.sum = Math.min(this.formData.sum, this.pubData.numberMax)
                })
            }
        },
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/user/Encapsulation/Encapsulation.scss";
    
    .Product_but{
    	position: fixed;
    	left: 0;
    	bottom: 0;
    	width: 100%;
    	height: 200rpx;
    	.but{
    		margin-left: 30rpx;
    		width: 70%;
    		height: 100rpx;
    		border-radius: 20rpx;
    		color: #fff;
    	}
    }
</style>